import React from 'react';
import ReactDOM from 'react-dom';
import '../css/tab.css';

// 只是用react实现tab切换，思路不太好，不想改了，
// 然后用react-redux实现了一遍，详见tab.react.redux.js

class Newtab extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      active: props.active
    }
  }
  tabSwitch(e) {  //这里可以父级的方法传入，直接在onclick执行
    let active = e.target.title;
    this.setState({
      active: active
    },()=> this.props.onChange(active))
  }
  render() {
    return (<ul className="nav">
      {
        this.props.lists.map((val,i)=><li onClick={this.tabSwitch.bind(this)} title={i} className={i == this.state.active ? 'active' : ''} key={i}>{val}</li>) 
      }
      </ul>)
  }
}

class Newlist extends React.Component {
  constructor() {
    super();
    this.state = {
      show: true
    }
  }
  
  remove(e) {
    let num = e.target.title;
    this.setState({
      show: false
    },()=> this.props.onChange(num))
  }
  render() {
    // let list = this.props['data-new'];
    return (<div className="new-list clearfix">
      <img src={this.props.src} />
      <div className="new-body">
        <h3>{this.props.title}</h3>
        <p className="new-author"><span>{this.props.author}</span>({this.props.job})</p>
        <p className="new-content">{this.props.newContent}<a href="javascript:;">...[查看全部]</a></p>
        <p className="new-read">此处问题有{this.props.readNum}人回答</p>
        <a onClick={this.remove.bind(this)} title={this.props.num} className="new-remove" href="javascript:;">删除</a>
      </div>
      </div>)
    
  }
}


class Tab extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data,
      num: props.num,
    }
  }

  changeSwitch(val) {
    this.setState({
      num: val,
    })
  }
  changeRemove(val) {
    let data = this.state.data;
    data[`newList${this.state.num}`][val] = false;
    this.setState({
      data: data
    })
  }
  render() {
    let newList = this.state.data[`newList${this.state.num}`];
    return (<div className="tab">
      <Newtab lists={this.props.lists} active={this.state.num} onChange={(val) => this.changeSwitch(val)} />
      {
        newList.map((val,i)=>{
          if(val.show)
            return <Newlist key={i} num={i} {...val} onChange={(val) => this.changeRemove(val)}/>
        })
      }
      </div>)
  }
}

ReactDOM.render(
  <Tab lists={lists} data={data}  num='0' />, 
  document.getElementById('root')
);

